<template>
  <div class="test-container">
    <h2>出库单API测试页面</h2>
    
    <el-card class="test-card">
      <template #header>
        <div class="card-header">
          <span>API接口测试</span>
        </div>
      </template>
      
      <div class="test-buttons">
        <el-button type="primary" @click="testGetAll" :loading="loading.getAll">
          测试获取所有出库单
        </el-button>
        
        <el-button type="success" @click="testGetById" :loading="loading.getById">
          测试根据ID获取出库单
        </el-button>
        
        <el-button type="warning" @click="testGetProducts" :loading="loading.getProducts">
          测试获取产品列表
        </el-button>
        
        <el-button type="info" @click="testGetApprovalStatus" :loading="loading.getApprovalStatus">
          测试获取审核状态选项
        </el-button>
        
        <el-button type="danger" @click="testAdd" :loading="loading.add">
          测试新增出库单
        </el-button>
      </div>
      
      <div class="test-results">
        <h3>测试结果：</h3>
        <el-input
          v-model="testResult"
          type="textarea"
          :rows="10"
          placeholder="测试结果将显示在这里..."
          readonly
        />
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { 
  getAllOutboundOrders,
  getOutboundOrderById,
  getProducts,
  getApprovalStatusOptions,
  addOutboundOrder,
  type AddOutboundOrderParams
} from '@/api/outboundOrder'

const testResult = ref('')
const loading = reactive({
  getAll: false,
  getById: false,
  getProducts: false,
  getApprovalStatus: false,
  add: false
})

const logResult = (title: string, result: any) => {
  const timestamp = new Date().toLocaleString()
  const resultStr = JSON.stringify(result, null, 2)
  testResult.value = `[${timestamp}] ${title}:\n${resultStr}\n\n${testResult.value}`
}

// 测试获取所有出库单
const testGetAll = async () => {
  loading.getAll = true
  try {
    const response = await getAllOutboundOrders()
    logResult('获取所有出库单', response)
    ElMessage.success('获取所有出库单测试成功')
  } catch (error) {
    logResult('获取所有出库单失败', error)
    ElMessage.error('获取所有出库单测试失败')
  } finally {
    loading.getAll = false
  }
}

// 测试根据ID获取出库单
const testGetById = async () => {
  loading.getById = true
  try {
    const response = await getOutboundOrderById(1)
    logResult('根据ID获取出库单', response)
    ElMessage.success('根据ID获取出库单测试成功')
  } catch (error) {
    logResult('根据ID获取出库单失败', error)
    ElMessage.error('根据ID获取出库单测试失败')
  } finally {
    loading.getById = false
  }
}

// 测试获取产品列表
const testGetProducts = async () => {
  loading.getProducts = true
  try {
    const response = await getProducts()
    logResult('获取产品列表', response)
    ElMessage.success('获取产品列表测试成功')
  } catch (error) {
    logResult('获取产品列表失败', error)
    ElMessage.error('获取产品列表测试失败')
  } finally {
    loading.getProducts = false
  }
}

// 测试获取审核状态选项
const testGetApprovalStatus = async () => {
  loading.getApprovalStatus = true
  try {
    const response = await getApprovalStatusOptions()
    logResult('获取审核状态选项', response)
    ElMessage.success('获取审核状态选项测试成功')
  } catch (error) {
    logResult('获取审核状态选项失败', error)
    ElMessage.error('获取审核状态选项测试失败')
  } finally {
    loading.getApprovalStatus = false
  }
}

// 测试新增出库单
const testAdd = async () => {
  loading.add = true
  try {
    const testData: AddOutboundOrderParams = {
      outboundId: 1,
      outboundOrderNumber: `TEST${Date.now()}`,
      outboundType: '测试出库',
      outboundTime: new Date().toISOString(),
      approvalStatus: '待审核',
      remarks: 'API测试出库单',
      createdTime: new Date().toISOString(),
      createdBy: 'test',
      modifiedBy: 'test',
      modifiedTime: new Date().toISOString(),
      isDelete: false
    }
    
    const response = await addOutboundOrder(testData)
    logResult('新增出库单', { request: testData, response })
    ElMessage.success('新增出库单测试成功')
  } catch (error) {
    logResult('新增出库单失败', error)
    ElMessage.error('新增出库单测试失败')
  } finally {
    loading.add = false
  }
}
</script>

<style scoped>
.test-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.test-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.test-buttons {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.test-results {
  margin-top: 20px;
}

.test-results h3 {
  margin-bottom: 12px;
  color: #303133;
}
</style>

